//基础设置流程
import React from 'react';
import styles from './index.module.less';
import process1 from '@/assets/process1.png';
import process2 from '@/assets/process2.png';
import process3 from '@/assets/process3.png';
import process4 from '@/assets/process4.png';
import process5 from '@/assets/process5.png';
import arrowLeft from '@/assets/arrowLeft.png';
import arrowRight from '@/assets/arrowRight.png';
import arrowBg from '@/assets/arrowBg.png';

const gapStr = () => {
  return (<div className="gapItem">
    <span><img src={arrowLeft} alt="" />
      <img src={arrowRight} alt="" /></span>
  </div>)
}

const BasicProcess = ({isNewUser}) => {

	const onMenuClick = (path) => {
		//新用户不跳转
		if(isNewUser) {
			return;
		}
		sessionStorage.setItem('jump_tab_key', '');
		window.open(`${window.location.origin}/#${path}`)
	}

  return (<>
    <div className={styles.basicProcessWrapper}>
      <h4 className="subTitle">使用流程</h4>
      <div className={styles.processFlexContent}>
        <div className="processItem">
          <div className="leftIcon" style={{ background: '#FD7842' }}>
            <img src={process1} alt="" />
          </div>
          <div className="rightText">
            <p>店铺授权</p>
            <span onClick={()=>onMenuClick('/shop/mine')}>我的网店</span>
          </div>
        </div>

        {gapStr()}

        <div className="processItem" style={{width:"160px"}}>
          <div className="leftIcon" style={{ background: '#FF5001' }}>
            <img src={process2} alt="" style={{position:'relative', top:'-3px'}} />
          </div>
          <div className="rightText">
            <p>商品匹配</p>
            <span className={styles.specItem}>匹配模式<span className="imgWrapper"><img src={arrowBg} alt="" /></span>
              <ul>
                <li onClick={()=>onMenuClick('/goods/shopGoods/advance')}>高级匹配</li>
                <li onClick={()=>onMenuClick('/goods/shopGoods/normal')}>普通匹配</li>
                <li onClick={()=>onMenuClick('/goods/shopGoods/intelligent')}>智能匹配</li>
              </ul>
            </span>
          </div>
        </div>

        {gapStr()}

        <div className="processItem">
          <div className="leftIcon" style={{ background: '#47B9ED' }}>
            <img src={process3} alt="" />
          </div>
          <div className="rightText">
            <p>审核付款</p>
            <span onClick={()=>onMenuClick('/trade/orderhandle')}>订单处理</span>
          </div>
        </div>

        {gapStr()}

        <div className="processItem">
          <div className="leftIcon" style={{ background: '#8C5AE8' }}>
            <img src={process4} alt="" />
          </div>
          <div className="rightText">
            <p>波次拿货</p>
            <span onClick={()=>onMenuClick('/storage/pick')}>拿货任务</span>
          </div>
        </div>

        {gapStr()}

        <div className="processItem">
          <div className="leftIcon" style={{ background: '#0069FF' }}>
            <img src={process5} alt="" />
          </div>
          <div className="rightText">
            <p>包装发货</p>
            <span onClick={()=>onMenuClick('/storage/print')}>扫码打单</span>
          </div>
        </div>
      </div>
    </div>
  </>)

}

export default React.memo(BasicProcess, () => {
  return true;
})